@keyframes waveShimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

@keyframes shortShimmer {
  0% {
    background-position: -100px 0;
  }

  100% {
    background-position: 100px 0;
  }
}

.base {
  max-width: 12rem;
  position: relative;
  height: 1rem;
  margin-bottom: 1.5rem;
}

.base::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: 3px;
  background-color: var(--line-grey);
  background-image: linear-gradient(
    to right,
    var(--line-grey) 0%,
    var(--border-grey) 20%,
    var(--line-grey) 40%,
    var(--line-grey) 100%
  );
  background-repeat: no-repeat;
  background-size: 800px 100px;
  animation: waveShimmer 1s linear 0s infinite normal forwards;
}

.base.blue::after {
  background-size: 200px 100px;
  background-color: var(--background-blue);
  background-image: linear-gradient(
    to right,
    var(--background-blue) 0%,
    var(--dropshadow-grey) 20%,
    var(--background-blue) 40%,
    var(--background-blue) 100%
  );
  animation: shortShimmer 1s linear 0s infinite normal forwards;
}

.base.grey::after {
  background-size: 200px 100px;
  background-color: var(--selected-grey);
  background-image: linear-gradient(
    to right,
    var(--selected-grey) 0%,
    var(--placeholder-grey) 20%,
    var(--selected-grey) 40%,
    var(--selected-grey) 100%
  );
  animation: shortShimmer 1s linear 0s infinite normal forwards;
}
